<script lang="ts" setup>
// Pinia store 替代 Zustand
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
// 替代 useEffect
import { useStudyRecordStore } from '@/stores/studyRecordStore';
import { useRouter } from 'vue-router'; // Vue Router 替代 React Router
const props = defineProps({
  courseId: {
    type: String,
    required: true,
  },
  folderId: {
    type: String,
    required: true,
  },
});

const router = useRouter(); // 创建 navigate 替代 useNavigate
const studyRecordStore = useStudyRecordStore();
// 返回按钮点击处理函数
const handleBackClick = () => {
  router.push({
    name: 'course-details',
    params: { courseId: props.courseId, folderId: props.folderId },
  });
};
</script>

<template>
  <div :class="$style.header">
    <slot name="leftSection">
      <div :class="$style.leftSection" @click="handleBackClick">
        <ArrowLeftOutlined :class="$style.icon" />
        <span :class="$style.title">返回课程主页</span>
      </div>
    </slot>

    <!-- 添加 rightSection -->

    <div :class="$style.rightSection">
      <slot name="rightSection">
        观看时间：{{ studyRecordStore.studyRecordData || '0' }}分钟
      </slot>
    </div>
  </div>
</template>

<style module lang="scss">
.header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;

  // 将 justify-content 修改为 flex-start，使子元素从左开始排列
  justify-content: flex-start;

  .leftSection {
    display: flex;
    align-items: center;
    cursor: pointer;

    .icon {
      font-size: 15px;
      margin-right: 8px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 20px;
    }

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }

  .rightSection {
    margin-left: 4rem; // 与左侧部分保持 4rem 的距离
    font-size: 16px;
    color: #333;
    // 如果需要垂直居中，可以添加以下样式
    display: flex;
    align-items: center;
  }
}
</style>
